<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="background: white;">
<script src="/public/js/jquery-1.11.3.min.js"></script>
<link href="/public/css/bootstrap.css" rel="stylesheet">
<script src="/public/js/bootstrap.js"></script>
<link href="/public/iconfont/iconfont.css">
<!--<script src="/public/js/tiff.min.js"></script>-->
<script>
    var MOUSECELLNUM = 6;
    var ENTERITISNUM = 9;
    var MOUSESCIATICNERVENUM = 7;
    var m_currentIndex = 0;
    var loadPNGImage = function (filename, index) {
        var image = new Image();
        // filename.replace(/png/,"jpg");
        // alert(filename);
        image.src = filename;
        // alert("filename:" + filename);
        image.id = "canvas_" + index;
        image.className = "img-rounded"
        image.original = mouseimageFiles[index];
        image.value = index;
        // image.style.cursor = cursor:pointer;
        image.style.width = "170px";
        image.onload = function () {
            var $elem = $('<span class="one"><br><br><span class="label label-info">' + mouseImageInfos[
                index] + '<br></span></span>');
            $elem.prepend(image);
            $('#output').append($elem);
            // if(index < MOUSECELLNUM){
            //    $('#output').append($elem);
            //  }else if(index <MOUSECELLNUM + ENTERITISNUM){
            //    $('#output2').append($elem);
            //  }else if(index < MOUSECELLNUM + ENTERITISNUM + MOUSESCIATICNERVENUM){
            //     $('#output3').append($elem);
            //  }

        }


    };

    var loadImage = function (filename, index) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', filename);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function (e) {
            var buffer = xhr.response;
            var tiff = new Tiff({
                buffer: buffer
            });
            var canvas = tiff.toCanvas();
            var width = tiff.width();
            var height = tiff.height();
            canvas.id = "canvas_" + index;
            if (canvas) {
                canvas.style.width = "170px";
                /*
                var $elem = $('<div><div><a href="' + filename + '">' +
                              filename +
                              ' (width: ' + width + ', height:' + height + ')' +
                              '</a></div></div>');
                $elem.append(canvas);
                $('#output').append($elem);
                */
                //canvas.onclick="ShowDiv('MyDiv','fade')"
                // canvas.addEventListener('click',function(e){
                //               getEventPosition(e);
                //           },false);
                // var $elem = $('<span class = "one"> </span>');
                var $elem = $('<span class="one"><br><br><span class="label label-info">' + mouseimageFiles[
                    index] + '<br></span></span>');
                $elem.prepend(canvas);
                $('#output').append($elem);
            }
        };
        xhr.send();
    };

    function bodyScroll(event) {
        event.preventDefault();
    }

    //禁止/允许滚动页面
    function scrControl(t) {
        if (t == 0) { //禁止滚动
            document.body.addEventListener('touchmove', this.bodyScroll, {
                passive: false
            });
        } else if (t == 1) { //开启滚动
            document.body.removeEventListener('touchmove', this.bodyScroll, {
                passive: false
            });
        }
    }


    function getEventPosition(ev) {

        ShowDiv("MyDiv", "fade");
        /*
                  　　var x, y;
                  　　if (ev.layerX || ev.layerX == 0) {
                      　　x = ev.layerX;
                      　　y = ev.layerY;
                  　　} else if (ev.offsetX || ev.offsetX == 0) { // Opera
                      　　x = ev.offsetX;
                      　　y = ev.offsetY;
                  　　}
                  　　return {x: x, y: y};
                  */
    }

    /*
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'arraybuffer';
    xhr.open('GET', "Merge.tiff");
    xhr.onload = function (e) {
      var tiff = new Tiff({buffer: xhr.response});
      var canvas = tiff.toCanvas();
      canvas.style.width = "170px";
      $('#output').empty().append(canvas);
      //document.body.append(canvas);
    };
    xhr.send();
    */


    //弹出隐藏层
    function ShowDiv(show_div, bg_div) {
        document.getElementById(show_div).style.display = 'block';
        document.getElementById(bg_div).style.display = 'block';
        var bgdiv = document.getElementById(bg_div);
        bgdiv.style.width = document.body.scrollWidth; // bgdiv.style.height = $(document).height();

        $("#" + bg_div).height($(document).height());
    };

    //关闭弹出层
    function CloseDiv(show_div, bg_div) {
        document.getElementById(show_div).style.display = 'none';
        document.getElementById(bg_div).style.display = 'none';
        // scrControl(1);
        document.body.removeEventListener('touchmove', bodyScroll, false);
        $("body").css({
            "overflow": "auto",
            "height": "auto",
            "position": "initial"
        });
        // 'overflow':'hidden' ,"position":"initial"
    };

    //上一张
    function previewImage() {
        if (m_currentIndex - 1 >= 0) {
            m_currentIndex = m_currentIndex - 1;

            $("#detailImage").attr("src", mouseimageFiles[m_currentIndex]);
            // alert(m_currentIndex + " " + mouseimageFiles[m_currentIndex]);
            // $("#imageInfoTitle").html(imageInfoTitles[m_currentIndex]);
            // alert(m_currentIndex + " " + imageInfoTitles[m_currentIndex]);
            // $("#imageInfoDetail").html(imageInfoDetails[m_currentIndex]);
            // alert(m_currentIndex + " " + imageInfoTitles[m_currentIndex]);
        }

    }

    //下一张
    function nextImage() {
        if (m_currentIndex + 1 < mouseimageFiles.length) {
            m_currentIndex = m_currentIndex + 1;
            $("#detailImage").attr("src", mouseimageFiles[m_currentIndex]);
        }
    }

    // Converts canvas to an image
    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
    }

    function showDetailImage(filename) {
        // var c = document.getElementById("detailCanvas");
        // var ctx = c.getContext("2d");
        var xhr = new XMLHttpRequest();
        xhr.open('GET', filename);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function (e) {
            var buffer = xhr.response;
            var tiff = new Tiff({
                buffer: buffer
            });

            var canvas = tiff.toCanvas();

            var width = tiff.width();
            var height = tiff.height();
            if (canvas) {
                // alert("size:"+width + " " + height);
                // var ctxx = canvas.getContext("2d");
                // ctx.drawImage(canvas,0,0,width,height);
                // ctx.putImageData(ctxx.data,0,0);
                document.getElementById("detailCanvas").getContext("2d").putImageData(canvas.getContext("2d")
                    .getImageData(0, 0, width, height), 0, 0, 400, 400);
                // document.getElementById("detailCanvas").getContext("2d").drawImage(canvas,0,0,width,height);
                // $('#detailCanvas').putImageData(canvas.getImageData(0,0,width,height),0,0);
                // ctx.putImageData(canvas.data,0,0);
                /*
                  canvas.style.width = "170px";
                  canvas.addEventListener('click',function(e){
                          getEventPosition(e);
                      },false);
                  var $elem = $('<span class = "one"> </span>');
                  $elem.append(canvas);
                  */

                // $('#MyDiv').append(canvas);
            }
        };
        xhr.send();
    };

    //哪个元素被点击
    function whichElement(e) {
        console.log(e.target.parentNode)
        var targ
        if (!e) var e = window.event
        if (e.target) targ = e.target
        else if (e.srcElement) targ = e.srcElement
        if (targ.nodeType == 3) // defeat Safari bug
            targ = targ.parentNode
        var tname
        tname = targ.tagName
        // alert("tname:" + tname);
        // var tid = new String(targ.id)
        var tid = targ.id;
        tid = tid.replace("canvas_", "");
        m_currentIndex = Number(tid);
        // alert("index:"+tid);
        if (tname == "IMG") {

            // showDetailImage('CMImage/'+imageFiles[1]);
            // alert("tname:" + targ.src);


            var detailImage = document.getElementById("detailImage");
            // var src = targ.src;
            // src.replace(/jpg/,"png");
            // alert(targ.original);
            detailImage.src = targ.src; //targ.original;

            detailImage.onload = function () {

                var imageInfoTitle = document.getElementById("imageInfoTitle");
                var imageInfoDetail = document.getElementById("imageInfoDetail");

                imageInfoTitle.innerHTML = $(e.target.parentNode).find('.label-info').html();
                // imageInfoDetail.innerHTML = imageInfoDetails[m_currentIndex];
                ShowDiv("MyDiv", "fade");
                startDrag(document.getElementById("detailImage"), document.getElementById("detailImage"));
                // scrControl(0);
                document.body.addEventListener('touchmove', bodyScroll, false);
                $('body').css({
                    'overflow': 'hidden',
                    'position': 'fixed'
                });
                //'position':'fixed',"width":"100%"

                // window.location.href = detailImage.src;
                // window.open(detailImage.src);
            }

            /*
              var v= document.getElementById(targ.id);
                var canvas = document.getElementById("detailCanvas");
              canvas.getContext("2d").drawImage(v,0,0,canvas.width,canvas.height);
            ShowDiv("MyDiv","fade");
            startDrag(document.getElementById("detailCanvas"),document.getElementById("detailCanvas"));
            */


            // var image = new Image();
            // image.onload = function(){
            //   var canvas = document.getElementById("detailCanvas");
            //   canvas.getContext("2d").drawImage(image,0,0,canvas.width, canvas.height);
            // }
            // image.src = "/4K.jpg";

            // document.getElementById("detailCanvas") = document.getElementById(targ.id);
            // alert("You clicked on a " + 'CMImage/'+imageFiles[1]);
        }
        // alert("You clicked on a " + tname + " element." + tid)
    }

    //


    var params = {
        zoomVal: 1,
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0,
        flag: false
    };

    //图片缩放
    function bbimg(o) {
        var o = o.getElementsByTagName("img")[0];
        params.zoomVal += event.wheelDelta / 1200;
        if (params.zoomVal >= 0.2) {
            o.style.transform = "scale(" + params.zoomVal + ")";
        } else {
            params.zoomVal = 0.2;
            o.style.transform = "scale(" + params.zoomVal + ")";
            return false;
        }
    }

    //获取相关CSS属性
    var getCss = function (o, key) {
        return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
    };
    //拖拽的实现
    var startDrag = function (bar, target, callback) {
        if (getCss(target, "left") !== "auto") {
            params.left = getCss(target, "left");
        }
        if (getCss(target, "top") !== "auto") {
            params.top = getCss(target, "top");
        }
        //o是移动对象
        bar.onmousedown = function (event) {
            params.flag = true;
            if (!event) {
                event = window.event;
                //防止IE文字选中
                bar.onselectstart = function () {
                    return false;
                }
            }
            var e = event;
            params.currentX = e.clientX;
            params.currentY = e.clientY;
        };
        document.onmouseup = function () {
            params.flag = false;
            if (getCss(target, "left") !== "auto") {
                params.left = getCss(target, "left");
            }
            if (getCss(target, "top") !== "auto") {
                params.top = getCss(target, "top");
            }
        };
        document.onmousemove = function (event) {
            var e = event ? event : window.event;
            if (params.flag) {
                var nowX = e.clientX,
                    nowY = e.clientY;
                var disX = nowX - params.currentX,
                    disY = nowY - params.currentY;
                target.style.left = parseInt(params.left) + disX + "px";
                target.style.top = parseInt(params.top) + disY + "px";
                if (typeof callback == "function") {
                    callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
                }
                if (event.preventDefault) {
                    event.preventDefault();
                }
                return false;
            }
        }
    };
</script>

<style>
    button {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    button img {
        width: 20px;
        height: 20px;
    }

    .one {
        /*background: black;*/
        display: block;
        float: left;
        text-align: center;

        margin: 0 30px 30px 0;
    }

    .black_overlay {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=80);
    }

    .white_content {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 51%;
        height: 66%;
        border: 5px solid black;
        background-color: black;
        z-index: 1002;
        overflow: hidden;
    }

    #output {
        width: 70%;
        margin: auto;
        display: block;
    }

    #buttonDiv {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin-bottom: 0 !important;
    }

    .white_content_small {
        display: none;
        position: absolute;
        top: 20%;
        left: 30%;
        width: 40%;
        height: 50%;
        border: 16px solid lightblue;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }

    .detail_image {
        /*relative*/
        position: relative;
        width: auto;
        height: 100%;
        background-color: black;
        z-index: 1002;
        /*overflow: auto;*/
        cursor: move;
    }

    .div_detail {
        float: right;
        width: 80%;
        height: 100%;
        background-color: black;
        text-align: center;
        z-index: 1002;
        overflow: hidden;
        position: relative;
        border: 1px solid #000;
    }

    .panel-body {
        background: grey;
    }
</style>

<div style="background-color: #4962C8; height: 60px">
    <div style=" text-align:center;">
        <span class="text-muted" style="font-size: 35px; color: white;  vertical-align:middle; ">图片展示</span>
    </div>

</div>

<div style="margin-left: 15px; margin-top: 30px; margin-right: 15px; margin-bottom: 30px;"
     onmousedown="whichElement(event)">
        <span id="output">
            <span class="one">
                <img src="http://47.114.153.52:8080/CMImage/20210707/HelaCell.jpg" id="canvas_1" class="img-rounded"
                     style="width: 170px;"><br><br>
                <span class="label label-info">海拉细胞<br></span>
            </span>
        </span>
</div>

<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>

<div id="MyDiv" class="white_content">

    <div
            style="position: absolute; text-align: right; cursor: default; height: 40px; background: black; z-index: 1003; top: 0px; right: 0px;">
        <button class="btn btn-primary btn" onclick="CloseDiv('MyDiv','fade')">
            <img src="/public/images/close.png" alt="">关闭
        </button>
        <!--                 <span style="font-size: 16px;" class="glyphicon glyphicon-remove" onclick="CloseDiv('MyDiv','fade')">关闭</span> -->
    </div>
    <div id="imageInfo"
         style="position: absolute; float:left; display:inline; width:20%;  height: 100%; background-color: #3C3C3C; z-index: 1003; top: 0px; left: 0px;">

        <!-- width: 100%;height: auto; -->
        <div id="buttonDiv" style=" margin-bottom: 30px; margin-top: 0px; margin-left: 0px; margin-right: 0px;">
            <button style="width: 49%; float: left; height: 40px; background-color: black;"
                    onclick="previewImage()">
                <img src="/public/images/left.png" alt="">
            </button>
            <button style="width: 49%; float: right; height: 40px; background-color: black;" onclick="nextImage()">
                <img src="/public/images/right.png" alt="">
            </button>
        </div>

        <!-- width: 100%;height: 50px; -->
        <div style="margin-top: 30px; margin-left: 5px; margin-bottom: 0px; margin-right: 5px; text-align: center;">
            <br>
            <h3 id="imageInfoTitle" style="color: white"></h3>
        </div>
        <div style="margin-top: 30px; margin-bottom: 10px; margin-left: 15px; margin-right: 15px;">
            <span id="imageInfoDetail" style="color: white; white-space:pre-line"></span>
        </div>

    </div>

    <div id="divDetail" class="div_detail">
        <div onmousewheel="return bbimg(this)">
            <img id="detailImage" class="detail_image">
            <!-- <canvas id="detailCanvas" class="detail_image"></canvas> -->
            <!-- squirrel -->
        </div>
    </div>
</div>
</body>